<template>
  <div class="goods-info">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag"></div>
    </transition>
    <!-- 轮播图区 -->
    <div class="mui-card">
      <!--内容区-->
      <!-- 
        同样是父组件给子组件传值,同样传的都发送请求之后的数据,为什么轮播图的效果可以实现,数字选择框的效果不能实现
        
        父子通过props传值的数据是实时变化的,父组件的值改变,子组件接收到的值也会改变

        1.轮播图是通过v-for循环传过去的值,刚开始是一个空数组,v-for可以根据数据变化而动态生成轮播图

        2.选择框的最大值是通过标签初始化达到效果,在初始化的时候传过去的是什么值,初始化的效果就是什么样
          初始化的时候由于数据还未回来,传过去的是undefined,所以选择框的最大值无效,必须通过 watch 监测
          这个值的变化,来设置初始化

       -->
      <lunbo :lunbotu="lunbotu" :isFlull="false"></lunbo>
      <!-- <div class="mui-card-content">
          
      </div>-->
    </div>
    <!-- 内容区 -->
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <!--内容区-->
      <div class="mui-card-content">
        <p class="price">
          <span>
            市场价:
            <del>¥&nbsp;{{ goodsInfo.market_price }}</del>
          </span>
          <span class="now_price">销售价:¥&nbsp;{{ goodsInfo.sell_price }}</span>
        </p>
        <p class="num">
          购买数量:
          <numBox :maxNum="goodsInfo.stock_quantity" @getCount="getCount"></numBox>
        </p>
        <p>
          <mt-button size="small" type="primary">立即购买</mt-button>
          <mt-button size="small" type="danger" @click="addCar">加入购物车</mt-button>
        </p>
      </div>
    </div>
    <!-- 参数区 -->
    <div class="mui-card">
      <!--页眉，放置标题-->
      <div class="mui-card-header">商品参数</div>
      <!--内容区-->
      <div class="mui-card-content">
        <p>商品货号:&nbsp;{{ goodsInfo.goods_no }}</p>
        <p>库存情况:&nbsp;{{ goodsInfo.stock_quantity }}件</p>
        <p>上架时间:&nbsp;{{ goodsInfo.add_time | dataFormate() }}</p>
      </div>
      <!--页脚，放置补充信息或支持的操作-->
      <div class="mui-card-footer">
        <mt-button type="primary" plain size="large" @click="getDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" plain size="large" @click="getCmt(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
// 导入轮播组件
import lunbo from "../subcomponents/swiper.vue";
// 导入numbox组件
import numBox from "../subcomponents/goodsInfo_numBox.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      lunbotu: [],
      count:1,
      goodsInfo: {},
      ballFlag: false,
    };
  },
  created() {
    this.getLunbo();
    this.getInfo();
  },
  methods: {
    getLunbo() {
      this.$http.get("api/getthumimages/" + this.id).then(res => {
        if (res.body.status == 0) {
          this.lunbotu = res.body.message;
        }
      });
    },
    getInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(res => {
        if (res.body.status == 0) {
          this.goodsInfo = res.body.message[0];
        }
      });
    },
    getDesc(id) {
      this.$router.push({ name: "goodsDesc", params: { id } });
    },
    getCmt(id) {
      this.$router.push({ name: "goodsCmt", params: { id } });
    },
    // 获取子组件 数字选择框中的数字
    getCount(data) {
      this.count = data;
      console.log("父组件获取到的值是" + this.count);
    },
    // 添加购物车
    addCar(){
      // 控制小球显示
      this.ballFlag=!this.ballFlag

      // 将商品信息添加添加到公共数据store中,调用store中的方法
      var info = {
        id:this.id,
        count:parseInt(this.count),
        price:this.goodsInfo.sell_price,
        selected:true
      };
      this.$store.commit('addCar',info)
    },
    beforeEnter(el) {
      el.style.transform = "translate(0px,0px)";
    },
    enter(el, done) {
      el.offsetWidth;
      // 因为要适配不同分辨率下和滚动条不同高度下,所以移动的位置不能写死
      // 要根据当前的位置计算移动的距离
      // getBoundingClientRect() 返回的是一个对象,是元素四条边距离可视窗口的 上边 和 左边 的距离
      const bL = el.getBoundingClientRect().left;
      const bT = el.getBoundingClientRect().top;

      // 购物车上数字图标的位置
      const nL = document.querySelector("#num").getBoundingClientRect().left;
      const nT = document.querySelector("#num").getBoundingClientRect().top;

      el.style.transform = `translate(${nL - bL}px,${nT - bT}px)`;
      el.style.transition='all 1s';
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },
  },
  components: {
    lunbo,
    numBox
  }
};
</script>
<style lang="scss" scoped>
.goods-info {
  overflow: hidden;
}
.ball {
  width: 15px;
  height: 15px;
  position: absolute;
  background: red;
  border-radius: 50%;
  z-index: 999;
  left: 142px;
  top: 354px;
}
.mui-card-content {
  padding: 10px 15px;
  .now_price {
    color: red;
    margin-left: 10px;
  }
}
.mui-card-footer {
  // 框架用的flex布局,导致两个按钮换不了行
  display: block;
  button {
    margin-bottom: 10px;
  }
}
</style>


